<template>
	<!-- 循环数组列表 -->
	<div v-for=' (item,index) in arrList' :key='index'>
		<p>元素的值：{{item}}---------其对应的索引为：{{index}}</p>
	</div>
	<!-- 循环对象数组列表 -->
	<div v-for=' (item,index) in objList' :key='index'>
		<p>元素的值：{{item.flowername}}---------其对应的索引为：{{index}}</p>
	</div>
</template>

<script setup>
	import { reactive } from 'vue'

	//演示数组渲染列表
	//使用v-for（根据list数组中的元素）渲染列表后，
	//当在list数组中删除一个元素后，index会发生变化，v-for会重新渲染列表，导致性能下降。
	//为了给v-for一个提示，以便它能跟踪每个节点的身份，从而对现有元素进行重用和重新排序，
	//建议通过key属性为列表中的每一项提供具有唯一性的值，
	//定义数据
	const arrList=reactive(['荷花','牵牛花','梅花','月桂'])
	
	const objList=reactive([
		{id:1,flowername:'荷花'},
		{id:2,flowername:'牵牛花'},
		{id:3,flowername:'梅花'},
		{id:4,flowername:'月桂'},
	])
</script>

<style>
</style>